<template>
	<view>
		<!-- 顶部搜索 -->
		<!-- <view class="su-top-search su-sticky">
			<su-search class="su-search" text-align="center"></su-search>
		</view> -->

		<!-- 列表 -->
		<!-- <su-plist ref="mainList" v-if="showList" :config="listConfig" :params="listParams" :bindData.sync="leaveArr">
			<template v-slot:content>
				<view v-for="(items,index) in leaveArr" :key="index">
					<!-- 自己的列表代码 -->
		<!-- 	
				</view>
			</template> -->
		<!-- </su-plist> -->

		<view class="content">
			<view class="item" v-for="(item,index) in leaveArr" :key="index" @click="fabClick(item)">
				<view class="title"><text class="span"></text> {{item.title}}</view>
				<view class="date">{{item.startDate}}-{{item.endDate}}</view>
				<view class="date">{{item.why}}</view>
				<view class="two">
					<view class="left">申请时间:{{item.startDate}}</view>
					<view class="right">{{item.state}}</view>
				</view>
			</view>
			<view class="sui-nomore-class sui-loadmore-none">
				<view class="sui-nomore">
					<view class="sui-nomore-text">没有更多了</view>
				</view>
			</view>
		</view>

		<!-- 悬浮按钮 -->
		<fab-button horizontal="right" :direct-open="true" @directClick="fabClick"></fab-button>
		<!-- 暂无数据 -->
		<su-nodata ref="nodata" icon="icon-zanwu-text" content="暂无数据~" />
		<!-- 加载中组件 -->
		<loading ref="loading"></loading>
	</view>
</template>

<script>
	//导入Mixin
	import fabButton from "@/components/su-saui/su-fab/fab.vue"
	import listMixin from "@/common/mixins/list_mixin.js"
	import suNodata from "@/components/su-saui/su-nodata/nodata.vue"
	import suSearch from "@/components/su-saui/su-search-bar/search-bar.vue"
	export default {
		mixins: [listMixin], //注册Mixin
		components: {
			fabButton,
			suNodata,
			suSearch
		},
		data() {
			return {
				leaveArr: [{
					title: "调休1天",
					startDate: "2021/5/19 9:00",
					endDate: "2021/5/20 9:00",
					why: "打算看监控科技has打卡机好困好困的",
					current: "2021-5-18 12:00",
					state: "处理中",
					name: "张三",
					department: "客服",
					tel: "1346876654",
				}, {
					title: "调休2天",
					startDate: "2021/5/19 9:00",
					endDate: "2021/5/20 9:00",
					why: "打算看大萨达所大所大监控科技has打卡机好困好困的",
					current: "2021-5-18 12:00",
					state: "编辑中",
					name: "李四",
					department: "技术",
					tel: "18976546",
				}, ],
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				// var dataConfig = {
				// 	action: "", //p9action
				// 	pageRow: { //分页参数
				// 		page: 1,
				// 		rows: 10
				// 	}
				// }
				// this.initList(dataConfig, () => {
				// 	/*初始化成功后刷新list*/
				// 	this.$refs.mainList.refreshData(() => {
				// 		uni.core.hideLoading()
				// 	})
				// })
				if (!this.leaveArr) {
					// this.$refs.nodata.show()
				} else {
					// this.$refs.nodata.hide()
				}
			},
			fabClick(item) {
				if (item) {
					uni.core.openPage("/pages/system/user/leave_form/leave_form?item=" + JSON.stringify(item))
				} else {
					uni.core.openPage("/pages/system/user/leave_form/leave_form")
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $default-back;
	}

	.content {
		padding: 30upx;

		.item {
			width: 100%;
			min-height: 200upx;
			border-radius: 20upx;
			background: #fff;
			margin-bottom: 20upx;
			padding: 30upx;

			.title {
				display: flex;
				align-items: center;
				font-size: 28upx;
				font-weight: 600;

				.span {
					width: 20upx;
					height: 20upx;
					border-radius: 50%;
					margin: 0 20upx;
					background: #33a0d6;
				}
			}

			.date {
				font-size: 24upx;
				color: #636463;
				padding: 5upx 0;
			}

			.two {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					color: #999;
					font-size: 28upx;
				}

				.right {
					color: #636463;
					font-size: 29upx;
				}
			}
		}
	}

	.sui-loadmore-none {
		width: 50%;
		margin: 0 auto;
		padding: 1.5em 0;
		line-height: 1.5em;
		font-size: 28upx;
		display: flex;
		justify-content: center;

		.sui-nomore {
			width: 100%;
			height: 100%;
			position: relative;
			display: flex;
			justify-content: center;
			margin-top: 15upx;
			padding-bottom: 5upx;

			&::after {
				content: ' ';
				position: absolute;
				border-bottom: 1px solid #dedede;
				transform: scaleY(0.5);
				width: 100%;
				top: 9px;
				left: 0;
			}

			.sui-nomore-text {
				color: #999;
				font-size: 14px;
				text-align: center;
				padding: 0 9px;
				height: 19px;
				line-height: 19px;
				position: relative;
				z-index: 1;
				background-color: $default-back;
			}
		}
	}
</style>
